<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #fff;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          [v-cloak] {
              display: none;
          }
        #tab1 .aui-active{
          color: #f23030;
          border-bottom: 2px solid #f23030;
        }
        .aui-list-item-middle{
          padding-left: 0.75rem;
        }
        .aui-radio:checked{
          background-color: #f23030;
          border: solid 1px #f23030;
        }

        .aui-toast-content{
          color: #fff;
        }
        .login_title{
          font-size: 1.2rem;
          text-align: center;
          font-weight: 600;
          margin-top: 2rem;
        }
        .login_title_en{
          text-align: center;
          color: #827a7a;
          margin-bottom: 1.9rem;
        }
        .aui-list{
              background-image: none;
        }
      </style>
  </head>
  <body>
<div id="app" style="box-sizing:border-box">
  <div style="width:3rem;height:3rem;margin:0 auto;margin-top:1.5rem">
    <img src="../../image/my/logo3.png" alt="">
  </div>
  <ul class="aui-list aui-form-list" style="margin-top: 1.2rem;">
      <li class="aui-list-item" style="height: 3rem;">
          <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
              <div class="aui-list-item-label-icon">
                  <i class="aui-iconfont aui-icon-mobile"></i>
              </div>
              <div class="aui-list-item-input">
                  <input type="Number" placeholder="请输入手机号" v-model="phone">
              </div>
              <div class="aui-list-item-label-icon" style="width: 1rem;height:1rem;">
                 <img src="../../image/my/m64.png" alt="" @click="registerClear">
              </div>
          </div>
      </li>
      <li class="aui-list-item" style="height: 3rem;">
          <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
              <div class="aui-list-item-label-icon">
                  <img src="../../image/my/m65.png" alt="" style="width: 1rem;">
              </div>
              <div class="aui-list-item-input">
                  <input type="Number" placeholder="请输入验证码" style="border-right: 1px solid #eee;" v-model="code">
              </div>
              <div class="aui-list-item-label-icon" style="width: 6rem;text-align:center;" @click="mycode">
                  <div style="color:#f23030;">{{codeMsg}}</div>
              </div>
          </div>
      </li>
      <li class="aui-list-item" style="height: 3rem;">
          <div class="aui-list-item-inner" style="border-bottom: 1px solid #eee;">
              <div class="aui-list-item-label-icon">
                  <i class="aui-iconfont aui-icon-lock"></i>
              </div>
              <div class="aui-list-item-input">
                  <input type="password" placeholder="请输入登录密码" v-model="password" class="registerPassword">
              </div>
              <div class="aui-list-item-label-icon" @click="isShowPassword">
                  <i class="aui-iconfont aui-icon-display"></i>
              </div>
          </div>
      </li>
  </ul>
    <div style="display:flex;align-items:center;margin-left:0.75rem;margin-top:1rem;">
      <img src="../../image/my/m28.png" alt="" style="width:0.8rem;margin-right:0.2rem">
      <div style="font-size:0.6rem;display: flex;align-items: center;">
        我已认真阅读并同意<div style="color:#000;font-size:0.6rem;"><span @click="dealopen" style="color:#f23030;">《商品售卖协议》</span>与<span  @click="dealopen2" style="color:#f23030;">《隐私协议》</span></div>
      </div>
    </div>
    <div style="width:80vw;margin:0 auto;background:#F62525;color:#fff;text-align:center;height:2rem;line-height:2rem;margin-top: 2rem;border-radius:1rem;" @click="myregister">登录领赠品</div>
</div>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript">

   function orderClose(type){
      $api.css(order_bounced,'display:'+type)
   }

  var tab = new auiTab({
    element:document.getElementById("tab1")
  },function(ret){
    if(ret){
        //  定义获取对象的所有兄弟节点函数
        function siblings(elm) {
            var a = [];
            var p = elm.parentNode.children;
            for(var i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
            }
            return a;
        };
        var index = ret.index;
        var activeC = document.getElementById("tab1-con" + index);
        activeC.className = "";
        for(var i=0;i<siblings(activeC).length;i++){
            siblings(activeC)[i].className = "aui-hide";
        }
    }
});
      apiready = function(){
        api.parseTapmode();

        // setRefresh()
      };
      //刷新
      function setRefresh() {
          var pullRefresh = new auiPullToRefresh({
              container: document.querySelector('.aui-refresh-content'),
              triggerDistance: 100
          }, function(ret) {

              if (ret.status == "success") {
                  setTimeout(function() {
                      pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                  }, 1500)
              }
          })
      }

  </script>
  <script type="text/javascript">
  apiready = function(){
    var toast = new auiToast({});
    new Vue({
      el:'#app',
      data:{
        phone:'',
        password:'',
        code:'',
        dealUrl:'',
        codeMsg:'发送验证码',
        isclick:true,
        registerCode:false
      },
      methods:{
        registerClear:function(){
          this.phone= "";
        },
        isShowPassword:function(){
          if($('.registerPassword').attr('type')!='text'){
              $('.registerPassword').attr('type','text')
          }else{
              $('.registerPassword').attr('type','password')
          }
        },
        myregister:function(){
          var _this = this;
          if(!_this.registerCode){
            toast.fail({
                    title:"请获取验证码",
                    duration:2000
                });
            return;
          }
          if(this.phone == ""){
            toast.fail({
                    title:"手机号不能为空",
                    duration:2000
                });
            return;
          }

          if(!checkMobile(_this.phone)){
            toast.fail({
                    title:"手机号错误",
                    duration:2000
                });
              return;
          }
          if(_this.code == ""){
            toast.fail({
                    title:"验证码不能为空",
                    duration:2000
                });
            return;
          }
          if(this.password == ""){
            toast.fail({
                    title:"密码不能为空",
                    duration:2000
                });
            return;
          }

          api.ajax({
             url: window.Url.Freeuser_register,
             method: 'post',
             data: {
               values: {
                 mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                 code: _this.code,
                 password:  Base64.encode('UNO' + _this.password + 'HACHA'),
                 reg_tye: 1,
                 is_agree: 1,
                 push_id: $api.getStorage('ajpushId'),
                 idCard: Base64.encode('UNO' + '110981199802020000' + 'HACHA')
               }
             }
           }, function(ret, err) {
               if (ret.re == 1) {
                    console.log('注册-----' + JSON.stringify(ret))
                   toast.success({
                     title:ret.info,
                     duration:1000
                   })
                   $api.setStorage('token', ret.data.token);
                   $api.setStorage('user_id', ret.data.user_id);
                   $api.setStorage('rong-token', ret.data.chat_id);
                   $api.setStorage('user_name', ret.data.username);
                   $api.setStorage('user_img',ret.data.head_img);
                     //如果注册成功执行
                     setTimeout(function(){
                       api.ajax({
                           url: window.Url.Freeuser_loginin,
                           method: 'post',
                           data: {
                             values: {
                               mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                               type: 1,
                               password: Base64.encode('UNO' + _this.password + 'HACHA'),
                               push_id: api.deviceId
                             }
                           }
                         }, function(ret, err) {

                             if (ret.re==1){
                               //  console.log('登录-----' + JSON.stringify(ret))
                                 $api.setStorage('token', ret.data.token);
                                 $api.setStorage('user_id', ret.data.user_id);
                                 $api.setStorage('rong-token', ret.data.chat_id);
                                 $api.setStorage('user_name', ret.data.username);
                                 $api.setStorage('user_data', ret.data);
                             }
                         })
                      var jsfun = 'window.location.reload();';
                      api.execScript({
                          name: 'root',
                          frameName: 'five_frame/index.html',
                          script: jsfun
                      });
                      api.openWin({
                          name: 'theGiftsHeader',
                          url: './five_frame_header2.html',
                          pageParam: {
                                type:'我的赠品',
                                name:'theGifts'
                          }
                      });
                  },1000)
               } else {
                 toast.fail({
                   title:ret.info,
                   duration:1000
                 })
               }
           })
        },
        mycode:function(){
          var _this = this;
          if(this.phone == ""){
            toast.fail({
                    title:"请输入手机号",
                    duration:2000
                });
            return;
          }
          if(_this.isclick){
            api.ajax({
               url: window.Url.Freeuser_getMessage,
               method: 'post',
               data: {
                 values: {
                   code: 'UNOHACHA',
                     mobile: Base64.encode('UNO' + _this.phone + 'HACHA'),
                   type: 1
                 }
               }
             }, function(ret, err) {
                 if (ret.re==1) {
                   _this.isclick = false;
                   var num = 60;
                   var time = setInterval(function(){
                       num--;
                       _this.codeMsg = num +'s';
                       if(num == 0){
                         clearInterval(time);
                         _this.codeMsg = '发送验证码';
                         _this.isclick = true;
                       }

                   },1000)
                      toast.success({
                        title:ret.info,
                        duration:1000
                      })
                    _this.registerCode=true
                 } else {
                   toast.fail({
                     title:ret.info,
                     duration:1000
                   })

                 }
             })
          }
        },
        //验证验证码
        validation:function(){
          var _this = this;
          api.ajax({
              url: window.Url.Freeuser_verificationCode,
              method: 'post',
              data: {
                  values: {
                      mobile:Base64.encode('UNO' + _this.phone + 'HACHA'),
                      code:_this.code
                  }
              }
          },function(ret, err){
              if (ret.re==1) {
                  toast.success({
                    title:'ret.info',
                    duration:2000
                  })
              } else {
                // toast.fail({
                //   title:ret.info,
                //   duration:2000
                // })
              }
          });

        },
        //协议地址
        dealText:function(){
          var _this = this;
          api.ajax({
              url:window.Url.Freeuser_getUserProtocol,
              method: 'post',
          },function(ret, err){

              if (ret.re==1) {
                console.log(JSON.stringify(ret))
                _this.dealUrl=ret.data.url;
              } else {
                  // toast.fail({
                  //   title:ret.info,
                  //   duration:2000
                  // })
              }
          });
        },
        dealopen:function(){
          var _this = this;
          api.openWin({
              name: 'dealUrl',
              url: './five_frame_header2.html',
              pageParam:{
                type:'商品售卖协议',
                data:_this.dealUrl
              }

          });

        },
        dealopen2:function(){
          var _this = this;
          api.openWin({
              name: 'dealUrl',
              url: './five_frame_header2.html',
              pageParam:{
                type:'隐私协议',
                data:window.Url.Protocol_type
              }

          });

        }
      },
      mounted:function(){
       this.dealText();
      },
      updated:function(){}
    })
  };
  </script>
  </html>
